<template>
  <div>
    <a-spin :spinning="loading">
      <a-modal title="选择学员" :visible="visible" @ok="handleOk" @cancel="handleCancel" width="750px">
        <a-input-search
          v-model="name"
          style="width:200px;margin-bottom:20px;"
          placeholder="学员姓名"
          @search="showModel()"
          clearable
        ></a-input-search>
        <a-table
          :loading="loading"
          :columns="columns"
          :rowSelection="{type:'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="user_management_table"
          :pagination="false"
          :dataSource="tableData"
          :scroll="{  y: 340 }"
          style="border:1px solid #e8e8e8;"
        >
          <span slot="name" slot-scope="text,record">
            <a-tag color="green" v-if="record.type==1">在读</a-tag>
            <a-tag color="blue" v-if="record.type==3">潜在</a-tag>
            <a-tag v-if="record.type==2">历史</a-tag>
            {{text}}
          </span>
        </a-table>
        <div class="page-foot">
          <span v-if="pageData && pageData.pagination">共{{ pageData.pagination.total }}条数据</span>
          <div>
            <a-pagination  v-if="pageData && pageData.pagination" v-model="nowPage" :total="pageData.pagination.total"  @change="changePage"/>
          </div>
        </div>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import { studentList } from '@/api/student'
import { studentCourseList } from '@/api/returnInfo'
const columns = [
  {
    title: '学员姓名',
    dataIndex: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '手机号',
    ellipsis: true,
    dataIndex: 'main_phone',
    key: 'main_phone',
  },
  {
    title: '年级',
    ellipsis: true,
    width: 100,
    dataIndex: 'grade_name',
    key: 'grade_name',
  },
]
export default {
  name: 'studentModel',
  props: {
    studentArr: Array,
    studentType: Number,
    projectType:{
      type:Number,
      default:1
    }
  },
  data() {
    return {
      selectedRowKeys: [], //单选
      visible: false,
      columns,
      tableData: [],
      loading: false,
      name: '', // 查询
      page:1,
      pageData: undefined,
      nowPage: undefined,
    }
  },
  methods: {
    getCourse(e){
      
    },
    changePage(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.selectedRowKeys = []
      this.showModel(page, pageSize)
    },
    handleOk() {
      let obj = Object
      if (this.selectedRowKeys !== '') {
        this.selectedRowKeys.forEach((val) => {
          this.tableData.forEach((item, index) => {
            if (index == val) {
              obj = item
            }
          })
        })
      }
      studentCourseList(obj.id,{project_type:this.projectType}).then(res=>{
          obj.couserInfo=res
          this.$emit('reload', obj)
      }).catch(err=>{
        this.$message.error(err.data.message||'课程获取失败')
      })
    
      this.visible = false
    },
    showModel(page = 1, pagesize = 10) {
      this.loading = true
     
        studentList({
          school_id: this.$store.state.user.school,
          keywords: this.name,
          pageSize: pagesize,
          pageNo: page,
          type:1
        })
          .then((res) => {
            this.tableData = res.data
            this.pageData = res.meta
            this.nowPage=res.meta.pagination.current_page
            if (this.studentArr.length > 0) {
              let array = []
              this.tableData.forEach((val, index) => {
                this.studentArr.forEach((item) => {
                  if (val.id == item) {
                    array.push(index)
                  }
                })
              })
              this.selectedRow = array
            } else {
              this.selectedRow = []
            }
          })
          .catch((err) => {
            // this.$message.error(err.data.message || '获取学员列表失败，请稍后重试')

          })
          .finally(() => {
            this.loading = false
          })
      

      this.visible = true
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
    },
    onSelectChange(selectedRowKeys, index) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = index
    },
  },
  watch: {
 /*    name(val) {
      this.loading = true
      studentList({
        school_id: this.$store.state.user.school,
        keywords: this.name,
        pageSize: 999999999999,
        type:1
      })
        .then((res) => {
          this.tableData = res.data
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取学员列表失败，请稍后重试')
        })
        .finally(() => {
          this.loading = false
        })
    }, */
  },
}
</script>

<style lang="less" scoped>
.page-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>